<template>
  <div :class="b()">
    <el-input :placeholder="placeholder"
              v-model="text"
              :size="size"
              ref="main"
              :clearable="disabled?false:clearable"
              :disabled="disabled"
              @change="handleChange"
              @click.native="handleClick"
              @focus="handleShow">
      <span slot="append"
            @click="handleShow">
        <i class="avue-crud__icon--small"
           :class="text"></i>
      </span>

    </el-input>
    <el-dialog class="avue-dialog"
               :title="placeholder"
               append-to-body
               :visible.sync="box"
               width="80%">
      <el-scrollbar style="height:400px;overflow-x:hidden">
        <avue-tabs :option="option" @change="handleTabs"></avue-tabs>
        <div :class="b('list')">
          <div :class="b('item',{'active':text===item})"
               v-for="(item,index) in list"
               :key="index">
            <i :class="[b('icon'),item.value]"
               @click="handleSubmit(item.value)"></i>
            <p v-if="item.label">{{ item.label }}</p>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ElIconSelect",
  props: {
    size:{
      type:String,
      default:'',
    },  placeholder:{
      type:String,
      default:'',
    },
    disabled:{
      type:String,
      default:null,
    }

  },
  data() {
    return {};
  },
  methods:{
    handleShow(){

    },
    handleTabs(){},
    handleSubmit(){},
  }
}
</script>

<style scoped>

</style>
